<template>
  <transition name="slide">
    <music-list :songs='songs' :title='title' :bg-image='bgImage'></music-list>
  </transition>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  import MusicList from 'components/music-list/MusicList';
  import {
    getSongList
  } from 'api/recommend';
  import {
    createDisc
  } from 'common/js/song';

  export default {
    name: 'Disc',
    data() {
      return {
        songs: []
      }
    },
    computed: {
      ...mapState(['disc']),
      title() {
        return this.disc.songListDesc
      },
      bgImage() {
        return this.disc.picUrl
      }
    },
    created() {
      this.getDetaill()
    },
    methods: {
      getDetaill() {
        if (!this.disc.id) {
          this.$router.push('/recommend')
          return
        }
        getSongList(this.disc.id).then(res => {
          const list = res.cdlist["0"].songlist;
          this.songs = this._normalizeSongs(list)
        })
      },
      _normalizeSongs(list) {
        let ret = [];
        list.forEach(item => {
          if (item.mid) {
            ret.push(createDisc(item))
          }
        });
        return ret
      }
    },
    components: {
      MusicList
    }
  }

</script>
